<template>
	<view>
		<u-navbar title=" " bgColor="transparent" :autoBack="true" placeholder>
		</u-navbar>
		<view class="top-bg">
			<image src="/static/image/login-bg.png" mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="px-32 fw-400 fs-24 lh-2 color-000">欢迎登录</view>
			<view class="px-32 fw-600 fs-24 color-000 lh-2">和美家医陪诊工作台</view>
			<view class="box bg-fff">
				<view class="flex-align">
					<image src="/static/image/zh-icon.png" mode="aspectFill" class="icon"></image>
					<view class="fw-400 fs-16 lh-2 color-5F6865 ">手机号</view>
				</view>
				<view class="input-box">
					<input type="text" maxlength="11" v-model="loginForm.phone" placeholder="请输入手机号"
						placeholder-class="input-css" />
				</view>
				<view class="flex-align mt-24">
					<image src="/static/image/ma-icon.png" mode="aspectFill" class="icon"></image>
					<view class="fw-400 fs-16 lh-2 color-5F6865 ">密码</view>
				</view>
				<view class="input-box">
					<input type="text" v-model="loginForm.password" password placeholder="请输入密码"
						placeholder-class="input-css" />
				</view>
				<view class="pt-40">
					<u-button text="登录" @click="handleLogin" :loading="loading" loadingText="登录中..."
						customStyle="background-color: #24C98F;color:#fff;border:none;" iconColor="#fff"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				loginForm: {
					phone: '',
					password: ''
				}
			}
		},
		methods: {
			// 表单验证
			validateForm() {
				if (!this.loginForm.phone) {
					this.$f.msg('请输入手机号');
					return false;
				}

				// 手机号格式验证
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.loginForm.phone)) {
					this.$f.msg('手机号格式不正确');
					return false;
				}

				if (!this.loginForm.password) {
					this.$f.msg('请输入密码');
					return false;
				}

				return true;
			},

			// 处理登录
			handleLogin() {
				if (!this.validateForm()) {
					return;
				}
				this.loading = true;
				uni.login({
					success: ({
						code
					}) => {
						this.$api.post({
							url: '/companion/login/authenticate',
							data: {
								phone: this.loginForm.phone,
								password: this.loginForm.password,
								code: code
							},
							loadingTip: '登录中...',
							success: res => {
								console.log('-------', res)
								// 保存用户信息和token
								uni.setStorageSync('userInfo', res);
								
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									duration: 1500
								});

								uni.showModal({
									title: '提示',
									content: '请确定是否开启通知服务',
									success: (result) => {
										if (result.confirm) {
											this.getMessage();
										} else if (result.cancel) {
											setTimeout(() => {
												uni.navigateBack();
											}, 1000);
										}
									}
								})
							},
							fail: err => {
								this.loading = false;
							}
						});
					}
				})
			},
			getMessage() {
				//订阅消息
				uni.requestSubscribeMessage({
					tmplIds: [
						'esAAyWueA4eqJWL_d5WriQ399BM6bMDjK6LucLOEyjk'
					], // 多个模板ID
					success: (d) => {
						console.log('订阅成功', d);
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					},
					fail: (err) => {
						console.log('订阅失败', err);
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.top-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;

		image {
			width: 100%;
			height: 480rpx;
		}
	}

	.content {
		position: relative;
		top: 40rpx;
	}

	.box {
		margin-top: 72rpx;
		padding: 88rpx 64rpx 0 64rpx;
		border-top-right-radius: 48rpx;
		border-top-left-radius: 48rpx;
	}

	.icon {
		margin: 0 16rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.input-box {
		margin-top: 16rpx;
		padding: 28rpx 48rpx;
		border-radius: 48rpx;
		background-color: #F2F6F5;
		font-size: 28rpx;
	}

	.input-css {
		font-weight: 400;
		font-size: 28rpx;
		color: #A7B9B3;
	}
</style>